<template>
  <TitleBalance :name="`运输节点信息`">
    <!-- 内容 -->
    <template slot="center">
      <el-row :gutter="20"
              class="order-desc-wrap">
        <el-col :span="24">
          <div class="left-desc">
            <description title="">
              <description-item label="创建订单时间"
                                :value="certTransport.indexCreateTime"
                                :span="6" />
              <description-item label="创建人"
                                :value="certTransport.creator"
                                :span="6" />
              <description-item label="绑定设备时间"
                                :value="certTransport.indexDeviceBindingTime"
                                :span="6" />
              <description-item label="电子回单号"
                                :value="certTransport.indexDeviceCode"
                                :span="6" />
            </description>
          </div>
        </el-col>
      </el-row>
      <el-divider class="transport-divider"></el-divider>
      <div v-if="isShipped">
        <div class="titleTip">【已发货】</div>
        <el-row :gutter="20"
                class="order-desc-wrap">
          <el-col :span="24">
            <div class="left-desc">
              <description title="">
                <description-item label="货物出发时间"
                                  :value="certTransport.realFromTime"
                                  :span="6" />
                <description-item label="出发位置"
                                  :value="certTransport.realFromAddress"
                                  :span="18" />
                <!-- <description-item label="接收短信手机号"
                                  :value="certTransport.startOutPhoneNo"
                                  :span="6" />
                <description-item label="出发短信内容"
                                  :value="certTransport.startMessageMsg"
                                  :span="24" /> -->
              </description>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="isSetOutNotice">
        <div class="titleTip">【出发通知】</div>
        <el-row :gutter="20"
                class="order-desc-wrap">
          <el-col :span="24">
            <div class="left-desc">
              <description title="">
                <description-item label="短信发送时间"
                                  :value="certTransport.startMessageStartTime"
                                  :span="6" />
                <description-item label="短信发送位置"
                                  :value="certTransport.startAddress"
                                  :span="6" />
                <description-item label="接收短信手机号"
                                  :value="certTransport.startOutPhoneNo"
                                  :span="6" />
                <description-item label="出发短信内容"
                                  :value="certTransport.startMessageMsg"
                                  :span="24" />
              </description>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="isArrivedNotice">
        <div class="titleTip">【到达预告】</div>
        <el-row :gutter="20"
                class="order-desc-wrap">
          <el-col :span="24">
            <div class="left-desc">
              <description title="">
                <description-item label="签收码发送时间"
                                  :value="certTransport.arriveMessageStartTime"
                                  :span="6" />
                <description-item label="发送签收码位置"
                                  :value="certTransport.arriveAddress"
                                  :span="6" />
                <description-item label="接收短信手机号"
                                  :value="certTransport.preReachPhoneNo"
                                  :span="6" />
                <description-item label="签收码短信内容"
                                  :value="certTransport.arriveMessageMsg"
                                  :span="24" />
              </description>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="isArrived">
        <div class="titleTip">【已到达】</div>
        <el-row :gutter="20"
                class="order-desc-wrap">
          <el-col :span="24">
            <div class="left-desc">
              <description title="">
                <description-item label="货物到达时间"
                                  :value="certTransport.endedMessageStartTime"
                                  :span="6" />
                <description-item label="到达位置"
                                  :value="certTransport.endedAddress"
                                  :span="18" />
              </description>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="!!certTransport.signCodeMessageList">
        <div class="titleTip">【获取签收码】</div>
        <el-row v-for="(item, index) in certTransport.signCodeMessageList"
                :key="index"
                :gutter="20"
                class="order-desc-wrap">
          <el-col :span="24">
            <div class="left-desc">
              <description title="">
                <description-item label="获取签收码时间"
                                  :value="item.time"
                                  :span="6" />
                <description-item label="接收短信手机号"
                                  :value="item.contact"
                                  :span="6" />
                <description-item label="获取签收码短信"
                                  :value="item.content"
                                  :span="12" />
              </description>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="!!certTransport.reSignCodeMessageList">
        <div class="titleTip">【重签签收码】</div>
        <el-row v-for="(item, index) in certTransport.reSignCodeMessageList"
                :key="index"
                :gutter="20"
                class="order-desc-wrap">
          <el-col :span="24">
            <div class="left-desc">
              <description title="">
                <description-item label="重签签收码发送时间"
                                  :value="item.time"
                                  :span="6" />
                <description-item label="接收短信手机号"
                                  :value="item.contact"
                                  :span="6" />
                <description-item label="重签签收码短信"
                                  :value="item.content"
                                  :span="12" />
              </description>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
  </TitleBalance>
</template>

<script>
import TitleBalance from './TitleBalance.vue';
import Description from "./desc/Description";
import DescriptionItem from "./desc/DescriptionItem";

export default {
  name: 'TransportInfo',
  components: { TitleBalance, Description, DescriptionItem },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    certTransport () {
      return this.value
    },
    isShipped () {
      const { realFromTime, realFromAddress } = this.certTransport
      return realFromTime || realFromAddress
    },
    isSetOutNotice () {
      const { startMessageStartTime, startAddress, startOutPhoneNo, startMessageMsg } = this.certTransport
      return startMessageStartTime || startAddress || startOutPhoneNo || startMessageMsg
    },
    isArrivedNotice () {
      const { arriveMessageStartTime, arriveAddress, preReachPhoneNo, arriveMessageMsg } = this.certTransport
      return arriveMessageStartTime || arriveAddress || preReachPhoneNo || arriveMessageMsg
    },
    isArrived () {
      const { endedMessageStartTime, endedAddress } = this.certTransport
      return endedMessageStartTime || endedAddress
    }
  }
}
</script>

<style scoped>
.transport-divider {
  background-color: var(--prev-border-color-grey);
  margin-top: 0;
}
.titleTip {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
}
</style>